<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn">打印预览</el-button>
    <div ref="print" id="printArea">
      <div v-for="(item, index) in dayinlist" :key="index">
        <!-- <div class="hr"></div> -->
        <!-- <p class="title center_text" style="font-size: 22px;">{{item.biaoqian_name?item.biaoqian_name:Infomation}}</p> -->
        <table style="border-collapse: collapse;margin-top:15px;" cellspacing="0">
          <tr>
            <td width="280">单号</td>
            <td><span>{{ item.order_number }}</span></td>
            <td rowspan="5" width="400">
              <vue-qr :text='"{\"order_id\":" + item.id + "}"' :size="300" class="er_ma" :margin="3"></vue-qr>
            </td>
          </tr>
          <tr>
            <td width="280">型号</td>
            <td><span>{{ item.model_number ? item.model_number.model_number : '' }}</span></td>
          </tr>
          <tr>
            <td width="280">规格</td>
            <td><span>{{ item.specification ? item.specification.specification : "" }}</span></td>
          </tr>
          <tr>
            <td width="280">尺寸</td>
            <td><span>{{ item.models_field.size }}</span></td>
          </tr>
          <tr>
            <td width="280">方向</td>
            <td><span>{{ item.direction }}</span></td>
          </tr>
          <tr>
            <td width="280">备注</td>
            <td colspan="2">
              <el-input class="input_d" type="textarea" autosize v-model="item.remark"
                style="color: #000;font-size:12px;"  maxlength="200" show-word-limit></el-input>
            </td>
          </tr>
        </table>
        <div style="page-break-after: always"></div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
  components: {
    vueQr,
  },
  data() {
    return {
      dayinlist: [],
      imageUrl: "",
      strDate: "",
      erweitext: "",
      isprint: true,
      Infomation: ''
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    console.log(this. dayinlist)
    this.Infomation = this.$store.getters.Infomation.company_name
    this.currentTime();
  },
  methods: {
    print() {
      this.isprint = false
      this.$print(this.$refs.print);
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
    },
  },
};
</script>
<style scoped>
#printArea {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  margin: 0 auto;
  text-align: center;
}

.er_ma {
  margin: 0 auto;
}

#printArea table {
  width: 100%;
}

#printArea table tr td {
  font-size: 62px;
  font-weight: bold;
  border: 1px solid #000;
  text-align: center;
}

.input_d {

  font-weight: bold;
  color: #000000;
  height:200px;
}

.input_d>>>textarea {
  border: none;
  font-weight: bold;
  color: #000;
  font-size:20px;
  height:200px!important;
}

@media print {
  .input_d {
    font-size:16px;
    font-weight: bold;
    color: #000000;
  }

  .input_d>>>textarea {
    border: none;
    font-weight: bold;
    color: #000;
  }

  #printArea {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
  }

  #printArea table {
    width: 100%;
  }

  .er_ma {
    margin: 0 auto;
  }

  #printArea table tr td {
    font-size: 62px;
    font-weight: bold;
    border: 1px solid #000;
    text-align: center;
  }
}

.dayin_btn {
  width: 150px;
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}</style>
